<script setup>
import { Card } from 'vant';

export default {
  name: 'CustomCard',
  components: {
    'van-card': Card,
  },
  props: {
    notReadNum: {
      type: Number,
      default: 0,
    },
    desc: {
      type: String,
      default: '',
    },
    title: {
      type: String,
      default: '',
    },
    thumb: {
      type: String,
      default: '',
    },
    centered: {
      type: Boolean,
      default: true,
    },
    userId: {
      type: Number,
      default: 0,
    },
    //list: 聊天页面，search搜索页面
    type: {
      type: String,
      default: 'list',
    },
  },
  methods:{
    add() {
      this.$emit('add');
    },
  }
};

</script>

<template>
  <div>
    <van-card
      :num="type === 'list' ? notReadNum : undefined"
      v-bind="{ desc, title, thumb, centered }"
    >
      <template v-if="type === 'list'" #num>
        <div class="message-container">
          <div class="unread-message-count" v-if="notReadNum > 0">
            {{ notReadNum }}
          </div>
          <!-- 在这里添加其他内容 -->
        </div>
      </template>
      <template v-if="type === 'search'" #price>
        <van-button type="primary" size="mini" icon="plus" @click="add"  >添加</van-button>
      </template>
    </van-card>
  </div>
</template>

<style scoped lang="scss">
.van-card__thumb{
  width: 60px;
  height: 60px;

}
.van-card__content{
  min-height: 60px;
}
.message-container {
  position: relative;
  /* 在这里添加其他样式 */
}

.unread-message-count {
  position: absolute;
  top: -28px;
  right: 40px;
  background-color: red;
  color: white;
  border-radius: 50%;
  padding: 4px 4px;
  font-size: 12px;
}

.van-image{
  border-radius: 50% !important;
  overflow: hidden;
}

</style>
